@extends('layouts.admin')

@section('title', '版区类型')

@section('css')
    <link rel="stylesheet" href="{{cdn('/supervise/assets/plugins/pines-notify/pnotify.css')}}">
@endsection

@section('content')
    <div class="static-content">
        <div class="page-content">
            <ol class="breadcrumb">
                <li class=""><a href="{{url('/admin')}}">Home</a></li>
                <li ><a href="{{url('/admin/topic')}}">Topic</a></li>
                <li class="active"><a href="{{url('/admin/tlate/tags')}}">版区类型</a></li>
            </ol>
        </div>
        <div class="container-fluid">
            <div data-widget-group="group1" class="ui-sortable">
                @include('include.alert')
                <div class="row">
                    <div class="col-xs-12">
                        <div class="panel panel-default" data-widget="{&quot;draggable&quot;: &quot;false&quot;}" data-widget-static="" style="visibility: visible; opacity: 1; display: block; transform: translateY(0px);">
                            <div class="panel-heading">
                                <h2>板块列表</h2>
                                <div class="panel-ctrls" data-actions-container="" data-action-collapse="{&quot;target&quot;: &quot;.panel-body&quot;}">
                                </div>
                                <div class="options">
                                    <form method="get" action="{{url('/admin/topic/partitions')}}" style="margin-bottom: 5px">
                                        <div class="form-group pull-right" style="margin-bottom: 0">
                                            <div class="col-md-12">
                                                <div class="input-group">
                                                    <span class="input-group-addon">
                                                        <i class="fa fa-search"></i>
                                                    </span>
                                                    <input type="text" class="form-control" name="q" placeholder="搜索" value="{{$q or ''}}">
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="panel-body">
                                <table class="table m-n" id="table">
                                    <thead>
                                    <tr>
                                        <th style="width: 30px">#</th>
                                        <th>ID</th>
                                        <th>显示名称</th>
                                        <th>字体颜色</th>
                                        <th>启用?</th>
                                        <th>排序</th>
                                        <th>创建日期</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    @if (!empty($categories))
                                        @foreach($categories as $category)
                                            <tr>
                                                <td><input type="checkbox" data-partition-id="{{$category->id or 0}}"></td>
                                                <td>{{$category->id or 0}}</td>
                                                <td>{{$category->name or ''}}</td>
                                                <td style="color:{{$category->color or ''}}">{{$category->color or ''}}</td>
                                                <td>
                                                    @if ($category->is_enable == 1)
                                                        <i class="fa fa-check text-success"></i>
                                                    @else
                                                        <i class="fa fa-times text-danger"></i>
                                                    @endif
                                                </td>
                                                <td>{{$category->index or 0}}</td>
                                                <td title="{{$category->created_at}}">{{dateTimeC($category->created_at)}}前</td>
                                                <td>
                                                    <button class="btn btn-sm btn-success edit" onclick="edit({{$category->id or 0}})"><i class="fa fa-edit"></i>编辑</button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                    </tbody>
                                    <tfoot>
                                    <tr>
                                        <td colspan="8">
                                            <div style="width: auto; margin: 10px" class="btn-group">
                                                <button class="btn btn-inverse-alt" id="all">全选</button>
                                                <button class="btn btn-inverse-alt" id="unckeck">反选</button>
                                                <button class="btn btn-inverse-alt" id="unall">取消</button>
                                                <button class="btn btn-inverse-alt" id="delete">删除</button>
                                            </div>
                                        </td>
                                    </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default" data-widget='{"draggable": "false"}'>
                            <div class="panel-heading">
                                <h2>编辑</h2>
                                <div class="panel-ctrls" data-actions-container="" data-action-collapse='{"target": ".panel-body"}'></div>
                            </div>
                            <div class="panel-body">
                                <form action="{{url('/admin/tags/pull')}}" method="post" class="form-horizontal row-border">
                                    {{csrf_field()}}
                                    <input type="hidden" name="id"  value="{{old('id')}}">
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">标题</label>
                                        <div class="col-sm-8">
                                            <input type="text" class="form-control" value="{{old('name')}}" name="name">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">字体颜色</label>
                                        <div class="col-sm-8">
                                            <input type="color" class="form-control" value="{{old('color')}}" name="color">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">排序</label>
                                        <div class="col-sm-8">
                                            <input type="number" class="form-control" value="{{old('index')}}" name="index">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">是否启用</label>
                                        <div class="col-sm-8">
                                            <div class="checkbox block"><label><input type="checkbox" id="is_enable" name="is_enable"> 启用</label></div>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <div class="col-sm-10">
                                            <button type="submit" id="sub" class="btn btn-success pull-right">添加</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script src="{{cdn('/supervise/assets/plugins/pines-notify/pnotify.min.js')}}"></script>
    <script src="{{cdn('/supervise/assets/plugins/bootbox/bootbox.js')}}"></script> 	<!-- Bootbox -->
    <script>
        $table  = $('#table');
        $inputs = $('input', $table);
        $(document).ready(function () {
            $('#all').click(function () {
                $inputs.prop('checked', true);
            });
            $('#unall').click(function () {
                $inputs.prop('checked', false);
            });
            $('#unckeck').click(function () {
                $inputs = $('input', $table);
                $length = $inputs.length;
                for(var i = 0; i < $length; i++){
                    if ($($inputs[i]).prop('checked')){
                        $($inputs[i]).prop('checked', false);
                    }else{
                        $($inputs[i]).prop('checked', true);
                    }
                }
            });
            $('#delete').click(function () {
                $list = getIDList();
                postAction('delete', $list, '删除', '是否删除选择的项目', '删除');
            });
        });
        function postAction($action, $list, titel, message, btnSuccess) {
            if ($list.length <= 0){
                return
            }
            bootbox.dialog({
                message: message,
                title: titel,
                buttons: {
                    success: {
                        label: btnSuccess,
                        className: "btn-success",
                        callback: function() {
                            $.post('/admin/tags/action',{
                                _token:$('meta[name=csrf-token]').attr('content'),
                                action:$action,
                                ids:$list
                            }, function (data) {
                                if (data.code == 0){
                                    window.location.reload();
                                }else{
                                    printErrorMsg(data.msg);
                                }
                            });
                        }
                    },
                    main: {
                        label: "取消",
                        className: "btn-primary",
                        callback: function() {
                        }
                    }
                }
            });
        }
        function getIDList() {
            $inputs = $('input', $table);
            $length = $inputs.length;
            $list   = new Array()
            for(var i = 0; i < $length; i++){
                if ($($inputs[i]).prop('checked')){
                    $list.push($($inputs[i]).attr('data-partition-id'));
                }
            }
            return $list;
        }
        function edit($id) {
            $.post('{{url('/admin/tags/get')}}',{
                _token:$('meta[name=csrf-token]').attr('content'),
                id:$id
            },function (data) {
                if (data.code == 0){
                    $json = data.data;
                    jQuery.each($json, function(key, val) {
                        $input = $('input[name='+key+']');
                        if ($input.html() != null && key != 'img'){
                            if (key == 'is_enable'){
                                val == 1 ? $input.prop('checked', true) : $input.prop('checked', false);
                            }else{
                                $input.val(val);
                            }
                        }
                    });
                    $('#sub').text('更新');
                }else{
                    printErrorMsg(data.msg);
                }
            });
        }
        function printErrorMsg($msg) {
            new PNotify({
                title: 'Error!',
                text: $msg,
                type: 'error',
                hide: false,
                icon: 'ti ti-info-alt',
                styling: 'fontawesome'
            });
        }
    </script>
@endsection